<template>
  <div class="order-page">
    <!--<headBar  isBack="show">-->
      <!--<div slot="xm-header-center">-->
        <!--<div class="xm-header-title" >订单详情</div>-->
      <!--</div>-->
      <!--<div slot="xm-header-right"></div>-->
    <!--</headBar>-->
    <div class="navTop">
      <div class="navStatus fixedTop">
        <span>{{orderDetail | orderStatus}}</span>
        <a href="" v-show="orderDetail.statusOrder==1">去支付</a>
        <a href="" v-show="orderDetail.statusOrder==3">确认收货</a>
        <a href="" v-show="orderDetail.statusOrder==102 && orderDetail.statusRefund">申请退款</a>
      </div>
    </div>
    <div class="order-address flex">
      <i class="icon icon-dingwei"></i>
      <div class="order-right">
        <h4>{{orderDetail.contacts}}<span>{{orderDetail.phone}}</span></h4>
        <p>地址：{{orderDetail.addressName}}</p>
      </div>
    </div>
    <div class="cart-list">
      <ul>
        <li>
          <div class="address">
            <span @click="enterStore(orderDetail.supplierId)"><i class="icon icon-dianpu5"></i>{{orderDetail.supplierName}}<span class="zy">自营</span> <i class="icon icon-arrowright"></i></span>
            <span class="fr status">共{{orderDetail.purchaseInfo.length}}种商品</span>
          </div>
          <ol>
            <li class="flex border-bottom" v-for="info in orderDetail.purchaseInfo">
              <img :src="info.mainImage">
              <div class="cart-center flex-1">
                <h3>{{info.wareName}} </h3>
                <p class="price">{{info.pricePiece | money}} <span>{{info.numberPerBox}}袋/件</span></p>
              </div>
              <div class="cart-right">
                <span> ×{{info.number}}</span>
              </div>
            </li>
          </ol>
          <div class="compute">
            <p>订单金额：<span>￥{{orderDetail.amountTotal | money}}</span></p>
            <p>熊猫币抵扣：<span>-￥{{orderDetail.deductionAmount || 0 | money}}</span></p>
          </div>
          <div class="item-wrap">
            <p class="border-top">实付金额：<span>￥<em>{{orderDetail.amountPay | money}}</em></span></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="detail-wrap" v-show="orderDetail.description">
      <label>买家备注：</label>{{orderDetail.description}}
    </div>
    <div class="detail-wrap" v-show="orderDetail.sendDesc">
      <label>发货说明：</label>{{orderDetail.sendDesc}}
    </div>
    <div class="detail-wrap l1">
      <p class="flex">
        <label>订单号码：</label><input id="codeText" class="flex-1" v-model="orderDetail.code" readonly>
        <button class="copyBtn" data-clipboard-target="#codeText" >复制</button>
      </p>
      <p v-for="logTime in orderDetail.orderLogTimeInfo"><label>{{logTime.logTypename}}：</label>{{logTime.logTime}}</p>
    </div>
    <div class="detail-wrap l1" v-show="orderDetail.drawStatus==1">
      <p><label>发票抬头：</label>{{orderDetail.invoiceTitle}}</p>
      <p><label>发票内容：</label>{{orderDetail.invoiceContent}}</p>
      <div v-show="orderDetail.invoiceType==1">
        <p><label>纳税人识别码：</label>{{orderDetail.taxpayerCode}}</p>
        <p><label> 注册地址：</label>{{orderDetail.regAddress}}</p>
        <p><label>注册电话：</label>{{orderDetail.regPhone}}</p>
        <p><label>开户银行：</label>{{orderDetail.bank}}</p>
        <p><label>银行卡号：</label>{{orderDetail.bankAccount}}</p>
      </div>
    </div>

    <form action="/panda-app/order/orderPay" method="post" class="hide" ref="form">
      <input type="text" name="code" ref="code" v-model="orderDetail.code">
      <input type="text" value="4" name="payMethodId" ref="payMethodId">
    </form>
  </div>
</template>
<script>
  import Clipboard from 'clipboard';
  let userName = '';
  export default {
    props: {},
    data() {
      return {
          scroll:0,
          orderCode: null,
          orderDetail: {},
          subOrderInfo:{},
          orderTime:'',
          goodsNum: 1,
          orderLog: []
      };
    },
    methods: {
        menu() {
            this.scroll = document.body.scrollTop;
        },
        /**
         * 获取订单详情
         * */
      getOrderDetail(){
        getOrderDetail({code: this.orderCode}).then(data=>{
            if(data.returnCode == '000000'){
                this.orderDetail = data.result;
            }
        })
      },
      /**
       * 点击支付
       * @param <Object> 订单对象
       * */
      clickPay() {
          this.$refs.form.submit();
      },
      /**
       * 确定收货
       * @param <string> 订单id
       * */
      receiveSuc(){
        confirmReceipt({orderSubCode: this.orderCode, statusOrder: 4}).then(data=>{
            if(data.returnCode == '0000000'){

            }
        })
      },
      /**
       * 删除订单
       * @param <object>
       * */
      deleteOrder() {
          MessageBox.confirm('确定删除此订单?').then(action => {
              deleteOrder({code: this.orderCode}).then(data => {
                  if (data.returnCode == '000000') {
                      Toast('删除成功');
                  } else {
                      Toast(data.errorMsg);
                  }
              })
          });
      },
      /**
       * 退款
       * @param <object> 订单号
       * */
      orderApplyRefund() {
          MessageBox.confirm('亲，确定要放弃这个订单吗?').then(action => {
              orderApplyRefund({code: this.orderCode}).then(data => {
                  if (data.returnCode == '000000') {
                      Toast('退款申请成功');
                  } else {
                      Toast(data.errorMsg);
                  }
              })
          })
      },
      // 进入商店
      enterStore: function(supplierId){
          this.$router.push({name: 'store', params: {storeId: supplierId}});
      }
    },
    filters: {
        orderStatus(item) {
            let statusRefund = item.statusRefund;
            let type = item.statusOrder;
            if (type == 102 && statusRefund == 1) {
                return '退款中';
            } else if (type == 9 && statusRefund == 2) {
                return '已退款';
            } else if (type == 1022 && statusRefund == 3) {
                return '退款失败';
            } else if (type == 102 && statusRefund == 11) {
                return '退款中';
            } else if (type == 1) {
                return '未支付';
            } else if (type == 101) {
                return '支付中';
            } else if (type == 105) {
                return '订单异常';
            } else if (type == 102) {
                return '待发货';
            } else if (type == 3) {
                return '待收货';
            } else if (type == 103) {
                return '已取消';
            } else if (type == 9) {
                return '已完成';
            } else {
                return '';
            }
        },
        orderFilter(type){
          if(type==1){
            return '待付款';
          }else if(type==2){
            return '待发货';
          }else if(type==3){
            return '待收货';
          }else if(type==4){
            return '交易完成';
          }else if(type==9){
            return '交易关闭';
          }else if(type==11){
            return '待退款';
          }
        },
       filterName(name){
        if(name!=userName){
          return name;
        }
        return '自己';
      }
    },
    created() {
        userName = Cookie.get('userName');
        this.orderCode = this.$route.params['orderCode'];
        this.getOrderDetail();
    },
    mounted(){
        const clipboard = new Clipboard('.copyBtn');
        clipboard.on('success', function(e) {
            Toast('复制成功');
            e.clearSelection();
        });
        clipboard.on('error', function(e) {
            Toast('复制失败');
        });
//        window.addEventListener('scroll', this.menu);
    },
    components: {
        Clipboard
    }
  };
</script>
<style lang="less" scoped>
  @import "./order.less";
  .navTop{
    width: 100%;
    height: 1.2rem;
  }
  .navStatus{
    width: 100%;
    height: 1.2rem;
    line-height: 1.2rem;
    padding:0 .32rem;
    box-sizing: border-box;
    background: url("../../assets/images/me/bg.jpg") top no-repeat;
    color: #fff;
    a{
      float: right;
      display: inline-block;
      width:1.32rem ;
      height: .44rem;
      line-height: .44rem;
      margin-top: .36rem;
      border: 2px solid #FFFFFF;
      border-radius: 8px;
      text-align: center;
      font-size: .24rem;
      color: #FFFFFF;
    }
  }
  .order-address{
    margin-bottom: .2rem;
    padding:.24rem .32rem;
    background: #fff;
    i{
      margin-top: .08rem;
    }
    .order-right{
      margin-left: .24rem;
      h4{
        line-height: .4rem;
        font-size: .28rem;
        color: #333333;
        span{
          margin-left: .24rem;
        }
      }
      p{
        line-height: .36rem;
        font-size: .24rem;
        color: #999999;
      }
    }
  }
  .cart-list .status{
    color: #333;
  }
  .cart-list .zy{
    position: relative;
    top:-.05rem;
    margin:0 .24rem 0 .1rem;
    padding: .03rem .05rem;
    background: #FF4A4A;
    border-radius: 4px;
    font-size: .2rem;
    color: #fff;
  }
  .cart-list .compute{
    height: auto;
    padding: .2rem .32rem;
    text-align: left;
    p{
      line-height: .48rem;
      font-size: .24rem;
      color: #999999;
      span{
        float: right;
        color: #333;
      }
    }
  }
  .cart-list .item-wrap{
    height:.82rem;
    line-height: .82rem;
    padding: 0 .32rem;
    background: #fff;
    font-size: .24rem;
    color: #333;
    span{
      float: right;
      color: #FF4A4A;
      em{
        font-size: .32rem;
      }
    }
  }
  .detail-wrap{
    line-height: .36rem;
    margin-bottom: .2rem;
    padding: .24rem .32rem;
    background: #fff;
    font-size: .24rem;
    color: #333;
    label{
      color: #999;
    }
    p{
      line-height: .48rem;
    }
    &.l1{
      padding: .11rem .32rem;
    }
    .copyBtn{
      display: inline-block;
      width: .88rem;
      height: .4rem;
      line-height: .4rem;
      margin-left: .4rem;
      text-align: center;
      border: 1px solid #CCCCCC;
      border-radius: 4px;
      font-size: .2rem;
      color: #333333;
    }
  }
</style>

